import React, {Fragment, useEffect, useState} from 'react';
import {
    Modal, Button
} from 'antd';

import styles from './style.module.scss';

interface PropsRule {
    title ?: string
    confirm ?: Function,
    cancel ?: Function,
    visible ?: boolean,
    children ?: React.ReactNode,
}

//基础弹窗
function Dialog(props: PropsRule) {

    const [dialogVis, setVisible] = useState(false);
    const {visible} = props;
    useEffect(()=>{
        setVisible(visible);
    }, [visible]);
    function cancel() {
        if (props.cancel) {
            setVisible(false);
            props.cancel(visible);
        }
    }
    function confirm() {
        if (props.confirm) {
            props.confirm(visible);
            setVisible(false);
        }
    }
    return (
        <Modal visible={dialogVis} title={props.title || '提示'} wrapClassName={styles.globalDialog} footer={[
            <Button key="cancel" onClick={cancel}>取消</Button>,
            <Button key="confirm" onClick={confirm}>确定</Button>,
        ]}>
            <div className='content'>
                {
                    props.children || '确定此操作？'
                }
            </div>
        </Modal>
    )
}

export default Dialog;

export type {
    PropsRule
}
